<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入mapbox依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        const gaode = {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        }
        /* 3、实例化地图 */
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        const map = new mapboxgl.Map({
            container: "map",
            /* style-layers */
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [120.145, 30.238915],
            zoom: 3
        })


        //
        let ll_layer = {
            //此id可随意设置，但是要唯一
            "id": "Line",
            //指定类型为线
            "type": "line",
            //设置数据来源
            // https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
            "source": {
                "type": "geojson",
                "data": 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
            },
            //设置绘制参数
            "paint": {
                //设置线颜色
                "line-color": "#1990FF",
                //设置线宽度，像素单位
                "line-width": 4,
                'line-opacity': 0.6
            }
        }
        let pp_layer = {
            //此id可随意设置，但是要唯一
            id: "Polygon",
            //指定类型为fill（填充区域）
            type: "fill",
            //设置数据来源
            source: {
                type: "geojson",
                data: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
            },
            //设置绘制参数
            paint: {
                //设置填充颜色
                "fill-color": "#ffcc33",
                //设置透明度
                "fill-opacity": 0.9,
            },
        }



        //
        map.on("style.load", () => {
            addPol()
            addLine();
            add_hl_layer()
            // 2.图层点击事件获取要素
            getLs()

        })

        function addPol() {
            //将线添加到一个图层中，在地图中显示
            map.addLayer(pp_layer);
        }
        function addLine() {
            //将多边形添加到一个图层中，在地图中显示
            map.addLayer(ll_layer);
        }


        // 1.加载geojson
        // 2.图层点击事件获取要素
        /* map.on('click', (evt) => {
            console.log(evt);
        }) */

        // 3.将要素设置给高亮图层
        // 设置一个高亮图层
        let hl_geo_data =
        {
            type: "FeatureCollection",
            features: []
        }
        function add_hl_layer() {

            map.addSource("hl-source", {
                type: "geojson",
                data: hl_geo_data,
            })
            let hl_layer = {
                //此id可随意设置，但是要唯一
                id: "hl",
                source: "hl-source",
                //指定类型为fill（填充区域）
                type: "fill",
                //设置绘制参数
                paint: {
                    //设置填充颜色
                    "fill-color": "red",
                    //设置透明度
                    "fill-opacity": 0.9,
                },
            }
            map.addLayer(hl_layer);
        }

        function getLs() {
            // console.log(map.getStyle());
            let layers = map.getStyle().layers;
            // console.log(layers)
            // id:Polygon
            // let p_layer = layers.find(item => item.id === "Polygon")
            // console.log(p_layer===pp_layer);
            // // console.log(p_layer);
            // console.log(pp_layer);
            map.on("click", "Polygon", evt => {
                // console.log(evt);
                // console.log(evt.features)
                // console.log(evt.features[0])
                var feature = evt.features[0];
                alert(feature.properties.name)
                // hl_geo_data.features.push(evt.features[0])
                let source = map.getSource("hl-source");
                // console.log(source)
                source.setData(feature)
            })

        }


    </script>
</body>

</html>